<script lang="ts" setup>
import { useSettingsStore } from "@/store/modules/setting"
import { useTheme } from '@/hooks/useTheme'
const { activeThemeName } = useTheme()
const settingsStore = useSettingsStore()
</script>

<template>
  <div class="drawer-container" :class="{ 'is-light': activeThemeName === 'light' }">
    <div>
      <h3 class="drawer-title">主题布局</h3>
      <div class="drawer-item">
        <span>显示标签栏</span>
        <v-switch class="drawer-switch" v-model="settingsStore.showTagsView" hide-details />
      </div>
      <div class="drawer-item">
        <span>显示标签栏图标</span>
        <v-switch class="drawer-switch" v-model="settingsStore.showTagIcon" hide-details />
      </div>
      <div class="drawer-item">
        <span>显示侧边栏 Logo</span>
        <v-switch class="drawer-switch" v-model="settingsStore.showSidebarLogo" hide-details />
      </div>
      <div class="drawer-item">
        <span>固定 Header</span>
        <v-switch class="drawer-switch" v-model="settingsStore.fixedHeader" hide-details />
      </div>
      <div class="drawer-item">
        <span>显示消息通知</span>
        <v-switch class="drawer-switch" v-model="settingsStore.showNotify" hide-details />
      </div>
      <div class="drawer-item">
        <span>显示切换主题按钮</span>
        <v-switch class="drawer-switch" v-model="settingsStore.showThemeSwitch" hide-details />
      </div>
      <div class="drawer-item">
        <span>显示全屏按钮</span>
        <v-switch class="drawer-switch" v-model="settingsStore.showScreenfull" hide-details />
      </div>
      <div class="drawer-item">
        <span>显示灰色模式</span>
        <v-switch class="drawer-switch" v-model="settingsStore.showGreyMode" hide-details />
      </div>
      <div class="drawer-item">
        <span>显示色弱模式</span>
        <v-switch class="drawer-switch" v-model="settingsStore.showColorWeakness" hide-details />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.drawer-container {
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;


  .drawer-title {
    margin-bottom: 12px !important;
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .drawer-item {
    font-size: 14px !important;
    padding: 12px 0 !important;
    margin: 2px;
  }

  span {
    padding: 5px;
    font-size: 1.2rem;

    .v-switch .v-selection-control {
      min-height: none !important;
    }

    .v-selection-control--density-default {
      --v-selection-control-size: none;
    }
  }

  .drawer-switch {
    float: right;
    height: 20px;
    display: inline-block;
    max-height: 22px !important;
    margin-top: -20px;
  }



}

.is-light {
  // vuetify 变量自定义样式
  color: rgba(var(--v-m-custom-color), 1);
  // color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
}
</style>
